<template>
  <div class="hospital-content-user-wrap">
    <div class="hospital-content-user-photo-wrap">
      <nuxt-link :to="`/hospital/${hospitalData.user_id}`">
        <div
          class="hospital-content-user-photo"
          :style="{background:'url('+hospitalData.user_photo+') center center no-repeat',backgroundSize:'100% 100%'}"
        />
      </nuxt-link>

      <nuxt-link to="/aboutus" rel="nofollow">
        <div class="hospital-content-user-consultation">
          立即咨询
        </div>
      </nuxt-link>
    </div>
    <div class="hospital-content-user-data">
      <div class="hospital-content-user-data-wrap">
        <div class="hospital-content-user-data-left">
          <nuxt-link :to="`/hospital/${hospitalData.user_id}`">
            <div class="hospital-content-user-data-name-wrap">
              <div class="hospital-content-user-data-name">
                {{ hospitalData.user_name }}
              </div>
              <nuxt-link to="/aboutus/follow">
                <div class="hospital-content-user-data-follow">
                  关注TA
                </div>
              </nuxt-link>
            </div>
            <div class="hospital-content-user-data-star">
              <div v-if="hospitalData.evaluation_record_stat!=null" class="hospital-content-user-data-star">
                <Stars :value="hospitalData.evaluation_record_stat.records[0].record_value" /> {{ hospitalData.evaluation_record_stat.records[0].record_value }}.0
              </div>
              <div v-else class="hospital-content-user-data-star">
                <Stars :value="5" /> 5.0
              </div>
            </div>
            <div class="hospital-content-hospital-address">
              医院地址：{{ hospitalData.user_attributes.user_address }}
            </div>
          </nuxt-link>
        </div>
        <div class="hospital-content-user-data-right">
          <div class="case-counter">
            <div class="case-num">
              {{ hospitalData.user_statistic.case }}
            </div>
            <div class="case-text">
              案例
            </div>
          </div>
          <div class="appointment-counter">
            <div class="case-num">
              {{ hospitalData.user_statistic.place_total }}
            </div>
            <div class="case-text">
              预约
            </div>
          </div>
          <div class="follow-counter">
            <div class="case-num">
              {{ hospitalData.user_statistic.focus_total }}
            </div>
            <div class="case-text">
              关注
            </div>
          </div>
          <div class="popularity-counter">
            <div class="case-num">
              {{ hospitalData.user_statistic.fans_total }}
            </div>
            <div class="case-text">
              粉丝
            </div>
          </div>
        </div>
      </div>
      <div class="hospital-content-user-data-project">
        <div class="hospital-content-user-data-project-text">
          明星项目:
        </div>
        <div
          v-for="item in hospitalData.user_attributes.good_at"
          :key="item.id"
          class="hospital-content-user-data-project-item"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Stars from '@/components/stars'
export default {
  components: {
    Stars
  },
  props: {
    hospitalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style scoped lang="scss">
.hospital-content-user-wrap {
  margin-top: 26px;
  margin-left: 28px;
  display: flex;
  .hospital-content-user-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .hospital-content-user-photo:hover{
    cursor: pointer;
  }
  .hospital-content-user-consultation {
    width: 100px;
    height: 24px;
    background: rgba(242, 241, 255, 1);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 76, 255, 1);
    line-height: 24px;
    text-align: center;
    margin-top: 17px;
  }
}
.hospital-content-user-data {
  width: 100%;
  margin-left: 14px;
  position: relative;
  .hospital-content-user-data-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .hospital-content-user-data-left:hover{
    cursor: pointer;
  }
  .hospital-content-user-data-left {
    .hospital-content-user-data-name-wrap {
      display: flex;
      align-items: center;
    }
    .hospital-content-user-data-name {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
    .hospital-content-user-data-position {
      font-size: 12px;

      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      margin-left: 10px;
    }
    .hospital-content-user-data-follow {
      width: 62px;
      height: 24px;
      background: rgba(82, 78, 255, 0.08);
      border-radius: 12px;
      font-size: 12px;

      font-weight: 400;
      color: rgba(80, 76, 255, 1);
      line-height: 24px;
      text-align: center;
      margin-left: 10px;
    }
    .hospital-content-user-data-star {
      font-size: 12px;

      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      display: flex;
      align-items: center;
    }
    .hospital-content-hospital-address {
      width: 364px;
      font-size: 12px;

      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      margin-top: 3px;
      flex-wrap: wrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
  }
  .hospital-content-user-data-right {
    display: flex;
    padding-right: 29px;
    .case-counter {
      text-align: center;
      margin-right: 60px;
      .case-num {
        font-size: 18px;
        font-weight: normal;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .case-text {
        font-size: 11px;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
    }
    .appointment-counter {
      text-align: center;
      margin-right: 60px;
      .case-num {
        font-size: 18px;
        font-weight: normal;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .case-text {
        font-size: 11px;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
    }
    .follow-counter {
      text-align: center;
      margin-right: 60px;
      .case-num {
        font-size: 18px;
        font-weight: normal;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .case-text {
        font-size: 11px;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
    }
    .popularity-counter {
      text-align: center;
      .case-num {
        font-size: 18px;
        font-weight: normal;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
      }
      .case-text {
        font-size: 11px;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
      }
    }
  }
}
.hospital-content-user-data-project {
  width: 670px;
  height: 44px;
  background: rgba(246, 246, 246, 1);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.01);
  border-radius: 4px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom:0;
  .hospital-content-user-data-project-text {
    margin-left: 18px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 17px;
  }
  .hospital-content-user-data-project-item {
    font-size: 12px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 17px;
    margin-left: 13px;
  }
}
.hospital-hospital {
  width: 340px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  position: absolute;
  top: 10px;
  right: 0;
  .hospital-hospital-title {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    .hospital-hospital-title-text {
      margin-left: 16px;
      font-size: 16px;

      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
    .hospital-hospital-title-See {
      display: flex;
      font-size: 16px;
      font-weight: 600;
      color: rgba(216, 216, 216, 1);
      line-height: 22px;
      align-items: center;
      margin-right: 19px;
      .hospital-hospital-title-See-icon {
        width: 8px;
        height: 8px;
        background: url("~assets/img/more-icon.png") center center no-repeat;
        background-size: 100% 100%;
        margin-left: 4px;
      }
    }
  }
  .hospital-doctor{
    padding: 14px;
  }
  .hospital-doctor-item{
    margin-bottom:16px ;
  }
}
</style>
